import React,{ useEffect, useState } from 'react'
import { Col, Row, Card, Table } from 'antd'

import "./home.css"
import { getData } from '../../api'
import * as Icon from "@ant-design/icons";
// import MyEcharts from '../../components/Echarts'
// 定义table列的数据
const columns = [
  {
    title: '课程',
    dataIndex: 'name'
  },
  {
    title: '今日购买',
    dataIndex: 'todayBuy'
  },
  {
    title: '本月购买',
    dataIndex: 'monthBuy'
  },
  {
    title: '总购买',
    dataIndex: 'totalBuy'
  }
]
// 订单统计数据
const countData = [
  {
    "name": "今日支付订单",
    "value": 111,
    "icon": "CheckCircleOutlined",
    "color": "#2ec7c9"
  },
  {
    "name": "今日收藏订单",
    "value": 222,
    "icon": "ClockCircleOutlined",
    "color": "#ffb980"
  },
  {
    "name": "今日未支付订单",
    "value": 333,
    "icon": "CloseCircleOutlined",
    "color": "#5ab1ef"
  },
  {
    "name": "本月支付订单",
    "value": 1111,
    "icon": "CheckCircleOutlined",
    "color": "#2ec7c9"
  },
  {
    "name": "本月收藏订单",
    "value": 2345,
    "icon": "ClockCircleOutlined",
    "color": "#ffb980"
  },
  {
    "name": "本月未支付订单",
    "value": 3423,
    "icon": "CloseCircleOutlined",
    "color": "#5ab1ef"
  }
]
// 获取icon对象的方法
const iconToElement = (name) => React.createElement(Icon[name]);

// 定义页面组件
const Home = () => {
    const userImg = require("../../assets/images/user.png")
    // 定义table数据
    const [tableData,setTableData] =useState([])


    useEffect(() => {
      getData().then(({data})=>{
          console.log(data,'res啊啊大阿达撒大大')
          const { tableData } = data.data
          setTableData(tableData)
      })
    },[])

    // useEffect(() => {
    //   getData().then(({ data }) => {
    //     const { tableData, orderData, userData, videoData } = data.data
    //     setTableData(tableData)
    //     const order = orderData
    //     const xData = order.date
    //     const keyArray =  Object.keys(order.data[0])
    //     const series = []
    //     keyArray.forEach(key => {
    //       series.push({
    //         name: key,
    //         data: order.data.map(item => item[key]),
    //         type: 'line'
    //       })
    //     })
    //     setEchartData({
    //       ...echartData,
    //       order: {
    //         xData,
    //         series
    //       },
    //       user: {
    //         xData: userData.map(item => item.date),
    //         series: [
    //           {
    //             name: '新增用户',
    //             data: userData.map(item => item.new),
    //             type: 'bar'
    //           },
    //           {
    //               name: '活跃用户',
    //               data: userData.map(item => item.active),
    //               type: 'bar'
    //           }
    //         ]
    //       },
    //       video: {
    //         series: [
    //           {
    //             data: videoData,
    //             type: 'pie'
    //           }
    //         ]
    //       }
    //     })
    //   })
    // }, [])
    return (
    <Row className="home">
      <Col span={8}>
        <Card hoverable>
          <div className="user">
            <img src={userImg} />
            <div className="userinfo">
              <p className="name">Admin</p>
              <p className="access">超级管理员333</p>
            </div>
          </div>
          <div className="login-info">
            <p>上次登录时间：<span>2025-7-19</span></p>
            <p>上次登录地点：<span>武汉</span></p>
          </div>
        </Card>
        <Card style={{ marginTop: '20px' }} hoverable>
          <Table rowKey={"name"} columns={columns} dataSource={tableData} pagination={false}/>
        </Card> 
      </Col>
      {/* 这段代码是获取数据 */}
       <Col style={{ marginTop: '20px' }} span={16}>
        <div className="num">
          {
            countData.map((item, index) => {
              return (
               
                <Card key={index}>
                    <div className="icon-box" style={{background: item.color}}>
                      {iconToElement(item.icon)}
                    </div>
                    <div className="detail">
                        <p className="num">￥{item.value}</p>
                        <p className="txt">{item.name}</p>
                    </div>
                </Card>
              )
            })
          }
        </div>
      {/*  { echartData.order && <MyEcharts chartData={echartData.order} style={{ height: '280px' }} /> }
        <div className="graph">
          { echartData.user && <MyEcharts chartData={echartData.user} style={{ width: '50%', height: '240px' }} /> }
          { echartData.video && <MyEcharts chartData={echartData.video} isAxisChart={false} style={{ width: '50%', height: '260px' }} /> }
        </div>*/}
      </Col> 
    </Row>
    )
}

export default Home;